<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>出租单管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="padding: 10px;">
	<!-- 搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm" lay-filter="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">出租单号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="rentid" placeholder="请输入出租单号" autocomplete="off" class="layui-input">
		      </div>
		      <label class="layui-form-label">车牌号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="carnumber" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
		      </div>
		      <label class="layui-form-label">身份证号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="identity" placeholder="请输入客户身份证号" autocomplete="off" class="layui-input">
		      </div>
	      	</div>
     	</div>
     	<div class="layui-form-item">
	      	<div class="layui-inline">
		      <label class="layui-form-label">开始时间</label>
		      <div class="layui-input-inline">
		        <input type="text" id="startTime" name="startTime" readonly="readonly" class="layui-input" placeholder="请选择开始时间">
		      </div>
		      <label class="layui-form-label">结束时间</label>
		      <div class="layui-input-inline">
		        <input type="text" id="endTime" name="endTime" readonly="readonly" class="layui-input" placeholder="请选择结束时间">
		      </div>
		      <label class="layui-form-label">归还状态</label>
			  <div class="layui-input-inline">
				<input type="radio" name="rentflag" value="1" title="已归还">
				<input type="radio" name="rentflag" value="0" title="未归还">
			  </div>
		      	<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
	      	</div>
      	</div>
	</form>
	<!-- 搜索条件结束-->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="rentTable" lay-filter="rentTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格行工具栏开始 -->
	<script type="text/html" id="rentRowbar">
	  {{#  if(d.rentflag == 0){ }}
	  	<a class="layui-btn layui-btn-sm  layui-btn-warm layui-icon
			layui-icon-download-circle" lay-event="exportRent">导出</a>
	  	<a class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update">修改</a>
		<a class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete">删除</a>
	  {{#  } else { }}
	  	<a class="layui-btn layui-btn-sm  layui-btn-warm layui-icon
			layui-icon-download-circle" lay-event="exportRent">导出</a>
	  {{#  } }}
	</script>
	<!-- 表格行工具栏结束 -->
		<!-- 添加和修改弹出层开始 -->
	<div style="display: none;padding: 10px;" id="addOrUpdateDiv">
		<form class="layui-form layui-row layui-col-space10" method="post" lay-filter="dataFrm"
			id="dataFrm">
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">出租单号</label>
					<div class="layui-input-block">
						<input type="text" name="rentid" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">车牌号</label>
					<div class="layui-input-block">
						<input type="text" name="carnumber" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">身份证号</label>
					<div class="layui-input-block">
						<input type="text" name="identity" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">出租价格</label>
					<div class="layui-input-inline">
						<input type="number" name="price" autocomplete="off"
							class="layui-input">
					</div>
					<label class="layui-form-label">操作员</label>
					<div class="layui-input-inline">
						<input type="text" name="opername" id="opername" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">起租时间</label>
					<div class="layui-input-inline">
						<input type="text" name="begindate" id="begindate" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
					<label class="layui-form-label">还车时间</label>
					<div class="layui-input-inline">
						<input type="text" name="returntime" id="returntime" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-inline">
					<button type="button" class="layui-btn layui-icon layui-icon-search"
						lay-submit="" lay-filter="doSubmit">提交</button>
					<button type="reset"
						class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--   添加和修改弹出层结束 -->
	

<script src="${ctx}/resources/layui/layui.js"></script>
<script>
	var tableIns;
	layui.use(['layer','table','form','laydate'], function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;
		//初始化开始时间
		laydate.render({
		  elem: '#startTime'
		  ,type: 'datetime'
		});
		//初始化结束时间
		laydate.render({
		  elem: '#endTime'
		  ,type: 'datetime'
		});
		laydate.render({
		  elem: '#begindate'
		  ,type: 'datetime'
		});
		//初始化结束时间
		laydate.render({
		  elem: '#returntime'
		  ,type: 'datetime'
		});
		//初始化登录出租单数据表格
		tableIns = table.render({
			    elem: '#rentTable'					//渲染的目标对象
			    ,url:'${ctx}/rent/rentList.action'	//数据接口
			    ,title: '出租单数据表'						//数据导出时的标题
			    ,toolbar:"#rentToolbar"				//表头的工具条
			    ,height:"full-140"	
			    ,page: true			//是否启用分页
			    ,cols: [[			//列表数据
			      ,{field:'rentid', title:'出租单号',align:"center",width:"259"}
			      ,{field:'carnumber', title:'车牌号', align:"center",width:"120"}
			      ,{field:'price', title:'出租价格', align:"center",width:"100"}
			      ,{field:'rentflag', title:'归还状态', align:"center",width:"100",templet:function(d){
			    	  return d.rentflag==0?"<span style='color:blue;'>未归还</span>":"<span style='color:green;'>已归还</span>";
			      }}
			      ,{field:'begindate', title:'起租时间', align:"center",width:"160"}
			      ,{field:'returntime', title:'归还时间', align:"center",width:"160"}
			      ,{field:'identity', title:'客户身份证号', align:"center",width:"180"}
			      ,{field:'opername', title:'操作人', align:"center",width:"100"}
			      ,{field:'createtime', title:'创建时间', align:"center",width:"160"}
			      ,{fixed:'right', title:'操作', toolbar:"#rentRowbar", align:"center",width:"240"}
			    ]]
			    ,done:function(res, curr, count){
                    //回调函数
                    //判断当前页码是否大于1
                    if(curr > 1 && res.data.length == 0){
                        //当前页码-1
                        var pageValue = curr - 1;
                        tableIns.reload({
                            page:{curr:pageValue}//修改页码
                        });
                    }
                }
			  });
		//监听查询表单的提交
		form.on("submit(doSearch)",function(data){
			if(data.field.rentflag == undefined){
				data.field.rentflag = "";
			}
			tableIns.reload({
				where: data.field
				,page: {
				  curr: 1 //重新从第 1 页开始
				}
			});		
		})
	 	//2. 监听行工具栏事件
		table.on('tool(rentTable)', function(obj){
		  var data = obj.data; //获得当前行数据
		  switch (obj.event) {
			case 'update':
				openUpdateRent(data);
				break;
			case 'delete':
				deleteRent(data);
				break;
			case 'exportRent':
				exportRent(data);
				break;
			}
		});
		var mainIndex;
		function openUpdateRent(data){
			mainIndex = layer.open({
				type:1
				,title:"修改出租单"
				,content:$("#addOrUpdateDiv")
				,area:['700px']
				,success:function(ayero, index){
					//回显表单
					form.val('dataFrm',data);
					
				}
			});
		}
		//监听修改弹出层的提交操作
		form.on("submit(doSubmit)",function(data){
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			$.post("${ctx}/rent/updateRent.action", params, function(result){
				if(result.success){
					//刷新数据表格
					tableIns.reload();
				}
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
			});
			//阻止表单提交
			return false;
		});
		
		//删除出租单
		function deleteRent(data){
			layer.confirm("是否删除出租单号为 ["+data.rentid+" ]的出租单?",{"icon":3,"title":"提示"},function (index) {
                $.post("${ctx}/rent/deleteRent.action",{"rentid":data.rentid},function (result) {
                    if(result.success){
                        //刷新数据表格
                        tableIns.reload();
                    }
                    layer.msg(result.message);
                }, "json");
            });
	 	}
		//导出出租单
		function exportRent(data){
			window.location.href = "${ctx}/stat/exportRent.action?rentid="+data.rentid;
		}
	});
</script>
</body>
</html>